<template>
	<view class="suggest2">
		<scroll-view class="" scroll-x="true">
			<view class="order-top">
				<view class="order-top-title" v-for="(item,index) in ordertop" :key="index" @click="choosetype(index)">
					<view class="order-top-title-text">
						<text style="font-size: 32rpx;" :class="{suretitle : sureline == index}">{{item}}</text>
					</view>
					<view :class="{line : sureline == index}"></view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				ordertop:['处理中','已处理'],
				sureline:0
			}
		},
		methods: {
			choosetype(index){
				this.sureline = index
			},
			ToIndex(){
				uni.switchTab({
					url:'/pagesA/index/index'
				})
			}
		}
	}
</script>

<style>
	page{
		width: 100%;
		height: 100%;
		background-color: #f7f7f7;
	}
	.suggest2{
		width: 100%;
		height: 100%;
	}
	.order-top{
		width: 100%;
		height: 90rpx;
		display: flex;
		justify-content: space-between;
	}
	.order-top-title{
		width: 50%; 
		height: 90rpx;
		display: flex;
		justify-content: center;
		align-items: flex-end;
		flex-wrap: wrap;
		background-color: white; 
	}
		
	.order-top-title-text{
		width: 100%;
		height: 88rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.line{
		width: 120rpx;
		height: 4rpx;
		position: relative;
		bottom: 0;
		background-color: red;
		animation: line 0.3s;
		margin: auto;
	}
	.suretitle{
		font-weight: bold;
		color: red;
	}
	@keyframes line{
		from{width: 0rpx;}
		to{width: 120rpx;}
	}
</style>